﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>干货集锦</title>
    <script src="/Apm/js/CMSView.js"></script>
    <style>
        .view-header {
            height: 60px;
            width: 100%;
            background-color: #393D49;
            text-align: center;
        }

            .view-header img {
                width: 40px;
                height: 40px;
                padding: 10px;
            }

            .view-header span {
                color: #fff;
            }

        .view-page {
            height: 100%;
            background-color: #fff;
        }

        .view-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: calc(100% - 64px);
            overflow-y: auto;
        }

        .view-title {
            padding: 1rem;
            font-size: 1.2rem;
            font-weight: bold;
        }

        .view-tooltar {
            padding: 0.8rem;
        }

        .view-img {
            width: 100%;
            text-align: center;
        }

            .view-img img {
                width: 60%;
                height: auto;
                padding: 1rem;
            }

        .view-text {
            width: 80%;
        }

            .view-text p {
                text-indent: 32px;
                line-height: 24px;
                font-size: 16px;
                color: #000;
                margin: 1rem 0;
            }

        .iconfont {
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="view-page">
        <div class="view-header">
            <img src="/image/logo.png" />
            <span>成就梦想，从此开始</span>
        </div>
        <div class="view-content">
            <div class="view-title">
                <span id="ViewTitle"></span>
            </div>
            <div class="view-tooltar">
                <i class="iconfont" id="ViewName"></i>
                <i class="iconfont" id="ViewTime"></i>
                <i class="iconfont" id="ViewNumber"></i>
            </div>
            <div id="ViewImage" class="view-img">
                
            </div>
            <div id="ViewContentData" class="view-text">
                
            </div>
        </div>

    </div>
</body>

</html>
<script>
    layui.use(['layer','code'], function () {
        var layer = layui.layer;
        
        var guid = getUrlParam('guid');
        ajaxget({
            url: 'api/BlogPublic/GetWorldModel?Guid=' + guid,
            success: function (data) {

                $("#ViewTitle").html(data.Title);

                $("#ViewName").html('&#xe715; ' + data.UserName)
                $("#ViewTime").html('&#xe6e9; ' + getViewFnDate(data.Addtime));
                $("#ViewNumber").html('&#xe6e6; ' + data.ViewNumber);

                var htmldata = data.ContentData;
                htmldata = htmldata.replace(/\n##/g, '<li>');
                //=begin=代表代码开始，=end=代表代码结束
                htmldata = htmldata.replace(/=begin=\n/g, '<pre class="layui-code">');
                htmldata = htmldata.replace(/\n=end=/g, '</pre>');

                var buf = htmldata.split('\n')//分割字符串保存到数组中
                var lis = [];
                for (var i = 0; i < buf.length; i++) {

                    lis.push("<p>" + buf[i] + "</p>");

                }
                var html = lis.join("");
                
                $("#ViewContentData").html(html);
                if (data.ImageUrl != "") {
                    $("#ViewImage").append('<img src="' + ApiURL + data.ImageUrl + '" />');
                }
                //加载code模块
                layui.code({
                    about: false
                });
            }
        })

    })
</script>